<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>Fooplot</title>

    <style>
        #plot{
            width: 100%;
            height: 240px;
            top: 0;
            left: 0;
            right: 0;
        }
        .softkey {
        height: 1.5rem;
        width: 100%;
        background-color: grey;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .softkey-right {
        width: 33% ;
        float: right;
        justify-content: space-between;
        text-align: right;
    }
    .softkey-center {
        width: 34% ;
        float: center;
        justify-content: space-between;
        text-align: center;

    }
    .softkey-left {
        width: 33% ;
        float: left;
        justify-content: space-between;
        text-align: left;
    }

    </style>

    <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
         so we use a script file. -->
    <script src="app.js" defer></script>
    <script src="fooplot.js"></script>

  </head>
  <body onload="draw_x2();">
    <div name="plot" id="plot" ></div>
    <input name="func_expr" style="width: 100%;font-size:1em;" value="x^2" autofocus>
    <footer class="softkey">
        <div class="softkey-left">Zoom in</div>
        <div class="softkey-center">Draw</div>
        <div class="softkey-right">Zoom out</div>
    </footer>

  </body>
</html>
